<template>
  <div class="wenzhangxiangq">
    <van-nav-bar
      class="vannavbar"
      title="文章详情"
      left-arrow
      @click-left="$router.back()"
    />

    <div class="contenes">
      <h1>{{ articles.title }}</h1>
      <van-cell>
        <div class="sinx">
          <div class="sinxla">
            <div slot="title" class="name">{{ articles.aut_name }}</div>
            <div slot="lable" class="xiangdui">{{ articles.pubdate }}</div>
          </div>
          <van-button
            :loading="load"
            @click="guanzhu"
            class="follow-btn"
            size="small"
            :icon="articles.is_followed ? '' : 'plus'"
            round
            :type="articles.is_followed ? 'default' : 'info'"
            >{{ articles.is_followed ? "已关注" : "关注" }}</van-button
          >
        </div>
        <van-image
          class="image"
          slot="icon"
          round
          fit="cover"
          :src="articles.aut_photo"
        />
      </van-cell>
      <div
        ref="articlescontent"
        class="content markdown-body"
        v-html="articles.content"
      ></div>
      <!-- 评论组件 -->
      <comments @pingslhu="huifupingl" :scrougID="ur_id" @pinglzongs="pinglzongs = $event" @paujgls="fabussss"></comments>
    </div>
    <van-cell class="cellBottom" center>
      <van-button
        slot="title"
        round
        class="buttons"
        @click="show = true"
        size="large"
        >写评论</van-button
      >
      <div slot="default" class="default">
        <van-icon name="chat-o" :badge="pinglzongs" size="25" />
        <van-icon
          :name="articles.is_collected ? 'star' : 'star-o'"
          @click="shouc"
          :class="articles.is_collected ? 'collection' : ''"
          size="25"
        />
        <van-icon
          :name="articles.attitude == 1 ? 'good-job' : 'good-job-o'"
          @click="dianz"
          :class="articles.attitude == 1 ? 'collection' : ''"
          size="25"
        />
        <van-icon name="share" size="25" />
      </div>
    </van-cell>
    <!-- 写评论的弹出层 -->
    <van-popup v-model="show" position="bottom">
      <van-field
        v-model.trim="message"
        rows="2"
        autosize
        
        type="textarea"
        maxlength="50"
        placeholder="请输入留言"
        show-word-limit
      />
      <van-button @click="fabu" :disabled="!message">发布</van-button>
    </van-popup>
    <!-- 回复评论 -->
    <van-popup v-model="isreplyshow" position="bottom" style="height:80%">
      <isreply :userID="ur_id" v-if="isreplyshow" @close="isreplyshow = false" :huifupinl="huifupinglData"></isreply>
    </van-popup>

  </div>
</template>
<script>
import "./markdown.css";
import { articledata,fabupingl } from "@/api/article";
import { ImagePreview } from "vant";
import {
  Cancelattention,
  focuson,
  xxshouc,
  quxiao,
  quxidianz,
  dianz,
} from "@/api/user";
import comments from "./components/comments";
import isreply from "./components/isreply"
// console.log(fabupingl)
export default {
  name: "wenz",
  props: {
    ur_id: {
      type: [String, Array, Number, Object],
      required: true,
    },
  },
  components: {
    comments,
    isreply
  },
  created() {
    this.article();
  },
  data() {
    return {
      articles: {},
      load: false,
      show: false,
      message:'',
      sie:'',
      pinglzongs:0,
      isreplyshow:false,//回复评论
      huifupinglData:{}
    };
  },
  methods: {
    huifupingl(data){
      // console.log(data)
      this.huifupinglData = data

      this.isreplyshow = true

    },
    // 获取评论
    fabussss(data){
      this.sie = data

    },

    async shouc() {
      this.$toast.loading({
        message: "操作中....",
        forbidClick: true,
      });
      //   console.log(this.articles.art_id)
      if (this.articles.is_collected) {
        const res = await quxiao(this.articles.art_id);
        console.log(res);
        //   收藏了,我们要取消收藏
      } else {
        console.log(55);
        const { data } = await xxshouc(this.articles.art_id);
        console.log(data);
        //   console.log(data)
        //   没有收藏，我们要收藏
      }
      this.articles.is_collected = !this.articles.is_collected;
      //   提示
      this.$toast.success(
        `${this.articles.is_collected ? "" : "取消"}收藏成功`
      );
    },
    async dianz() {
      this.$toast.loading({
        message: "操作中....",
        forbidClick: true,
      });
      if (this.articles.attitude == 1) {
        //   点赞了,我们要取消点赞
        const { data } = await quxidianz(this.articles.art_id);
        console.log(data);
        this.articles.attitude = -1;
      } else {
        const { daat } = await dianz(this.articles.art_id);
        console.log(daat);
        this.articles.attitude = 1;

        //   没有点赞，我们要点赞
      }
      this.$toast.success(
        `${this.articles.attitude == 1 ? "" : "取消"}点赞成功`
      );
      //   this.givealike = !this.givealike
    },
    //   关注用户,取消关注的事件

    async guanzhu() {
      this.load = true;
      if (this.articles.is_followed) {
        //   关注了

        Cancelattention(this.articles.aut_id); //取消关注
      } else {
        //   console.log(555)
        //   没有关注
        focuson(this.articles.aut_id); //关注
        // console.log(focuson)
        // console.log(this.articles)
      }
      this.articles.is_followed = !this.articles.is_followed;
      this.load = false;
    },
    async article() {
      var { data } = await articledata(this.ur_id);
      //   console.log(data)
      this.articles = data.data;
      // console.log(this.articles)

      this.$nextTick(() => {
        this.newDom();
      });
    },
    newDom() {
      const articleContent = this.$refs["articlescontent"];
      // console.log(articleContent)
      const img = articleContent.querySelectorAll("img");
      // console.log(img)
      var imgPath = [];
      img.forEach((item, index) => {
        // console.log(item.src,index)
        imgPath.push(item.src);

        item.onclick = function () {
          ImagePreview({
            images: imgPath,
            startPosition: index,
          });
        };
      });
    },
   async fabu(){
     this.$toast.loading('发布中...')
    //  console.log(this.ur_id.toString())
      // 发布评论的事件
      const {data} = await fabupingl({
        target:this.ur_id.toString(),
        content:this.message,
        art_id:null
        })
        // console.log(data.data.new_obj)
        // console.log(this.sie)
        this.sie.unshift(data.data.new_obj)
        this.show = false
        this.message=""
        this.$toast.success('发布成功')
        this.pinglzongs++

      
    }
  },
};
</script>
<style scoped lang="less">
.contenes {
  position: fixed;
  top: 46px;
  right: 0;
  left: 0;
  bottom: 50px;
  overflow: auto;
}
.wenzhangxiangq {
  .cellBottom {
    // box-sizing: border-box;
    background: #ffffff;
    position: fixed;
    bottom: -1px;
    display: flex;
    /deep/.van-cell__title {
      // height: 34px;
      flex: 2;
      .buttons {
        height: 30px;
        color: #3333;
      }
    }
    /deep/.van-cell__value {
      flex: 3;
      .default {
        display: flex;
        width: 100%;
        .collection {
          color: orange;
        }

        .van-icon {
          flex: 1;

          /deep/.van-info {
            top: 10px;
          }
        }
      }
    }
  }
  .content {
    padding: 14px;
    background: #ffffff;
  }
  .vannavbar {
    background: #1989fa;
    color: #ffffff;
  }
  /deep/.van-ellipsis {
    color: #ffffff !important;
  }
  h1 {
    margin: 0;
    background: #ffffff;
    padding-left: 12px;
    padding-top: 16px;
    text-align: left;
    font-size: 21px;
  }
  .xiangdui {
    color: #999;
    font-size: 12px;
    height: 20px;
  }
  .image {
    width: 35px;
    height: 35px;
  }
}
.sinx {
  align-items: center;
  justify-content: space-between;
  display: flex;
  .sinxla {
    // max-width: ;
    margin-left: 12px;
  }
  .name {
    font-size: 12px;
    height: 20px;

    color: #3a3a3a;
  }
}
/deep/.van-popup  {
  
  display: flex;
  justify-content: space-between;
  // align-content: center;
  align-items: center;
  /deep/.van-button {
    margin-right: 15px;
  }

}
</style>
